<template>
<!-- 填写信息 -->
  <div class="message" v-if="show" >
    <div class="messageFrom">
      <p>请填写以下信息！</p>
      <!-- 填写信息表单 -->
      <form action="" @keyup.13="messageFromBtn">
        <div>
          <span class="MinputTitle"><i>*</i>用户名：</span>
          <input type="text" id="username" v-model="username" autofocus name="username" placeholder="请设置用户名" @blur="MinputB" @focus="MinputF">
          <span class="error usernameError" :class="inputValNullU? 'errorRed' : 'errorRemind'"><i></i>{{usernameError}}</span>
        </div>
        <div>
          <span class="MinputTitle"><i></i>工作单位：</span>
          <input type="text" id="companyName" v-model="companyName" name="companyName" placeholder="请输入公司名称" @blur="MinputB" @focus="MinputF">
        </div>
        <div>
          <span class="MinputTitle"><i>*</i>邮箱地址：</span>
          <input type="text" id="email" v-model="emailval" name="email" placeholder="请输入电子邮箱地址" @blur="MinputB" @focus="MinputF">
          <span class="error emailError" :class="inputValNullE? 'errorRed' : 'errorRemind'"><i></i>{{emailError}}</span>          
        </div>
        <div class="push">
          <span class="MinputTitle"><i>*</i>关注主题：</span>
          <div class="themeBotton">
            <ul class="themeUl" v-if="themeUldatas.length !== 0">
              <li v-for="(value,i) in themeUldatas" :key="i">{{value.text}}</li>
            </ul>
            <span class="add" @click="themeAdd">
              <i></i>
              <span>+添加</span>
            </span>
          </div>
          <span class="error themeError errorRed"><i></i>{{themeError}}</span>
        </div>
        <div class="push">
          <span class="MinputTitle"><i>*</i> 关注信息源：</span>
          <div class="themeBotton">
            <ul class="themeUl" v-if="MUldatas.length !== 0">
              <li v-for="(value, i) in MUldatas" :key="i">{{value.text}}</li>
            </ul>
            <span class="add" @click="messageAdd">
              <i></i>
              <span>+添加</span>
            </span>
          </div>
          <span class="error themeError errorRed"><i></i>{{MmessageError}}</span>          
        </div>
        <input type="button" class="messageFromBtn" @click="messageFromBtn" value="确定">
      </form>
    </div>
    <!-- 添加主题/信息源弹框 -->
    <theme v-if="addThemeShow" @themeUldata="themeUldata" @MUldatas="MUldatas" :themeUlclick="themeUlclick" @aaa="aaa" :MUldatas="MUldatas" :themeUldatas="themeUldatas"></theme>
  </div>
</template>

<script>
// 添加主题/信息源弹框
import theme from '@/components/register/children/theme'

export default {
  data () {
    return {
      usernameError: '',  // 用户名报错/提醒内容
      companyNameError: '', // 工作单位报错/提醒内容
      emailError: '',  //邮箱报错/提醒内容
      themeError: '',  // 主题报错/提醒内容
      MmessageError: '',
      inputValNullU: false, // 用户名报错/提醒样式
      inputValNullC: false, // 工作单位报错/提醒样式
      inputValNullE: false, // 邮箱报错/提醒样式
      inputValNullT: false, // 主题报错/提醒样式
      username: '', // 用户名输入框内容
      companyName: '', // 工作单位输入框内容
      emailval: '', // 邮箱输入框内容
      MmessageVal: '', // 信息源输入框内容
      themeVal: '', // 主题输入框内容
      inputClick: false, // 是否可以点击下一步
      themeUldatas: '',
      MUldatas: '',
      addThemeShow: false,
      themeUlclick: '',
      themeUldatasId: [],
      MUldatasId: []
    }
  },
  props: [
    // 父组件接受是否显示此组件
    'show'
  ],
  methods: {
    aaa: function () {
      this.addThemeShow = false
    },
    themeUldata: function (themeUldatas) {
      if (this.themeUlclick === 0) {
        this.themeUldatas = themeUldatas
        for (var i = 0; i < this.themeUldatas.length; i++) {
          this.themeUldatasId.push(this.themeUldatas[i].mtId)
        }
      } else {
        this.MUldatas = themeUldatas
        for (var i = 0; i < this.MUldatas.length; i++) {
          this.MUldatasId.push(this.MUldatas[i].mtId)
        }         
      }
    },
    // input框失去焦点事件 报错
    MinputB: function (event) {
      var obj = {
        'usernameNull': '请输入用户名',
        'companyNull': '请输入公司名称',
        'emailNull': '请输入邮箱地址',
        'emailError': '例如：username@email.com',
        'companyError': '支持中文、英文、数字',
        'usernameError': '包括汉字、字母、数字、符号，首个必须是汉字或字母，长度为8~16个字符',
        'errorColor': true
      }
      this.MinputBF(event, obj)
    },
    // input框获取焦点事件 提醒
    MinputF: function (event) {
      var obj = {
        'usernameNull': '包括汉字、字母、数字、符号，首个必须是汉字或字母，长度为8~16个字符',
        'companyNull': '支持中文、英文、数字',
        'emailNull': '例如：username@email.com',
        'emailError': '例如：username@email.com',
        'usernameError': '包括汉字、字母、数字、符号，首个必须是汉字或字母，长度为8~16个字符',        
        'errorColor': false
      }
      this.MinputBF(event, obj)
    },
    // 判断input框是否符合规范
    MinputBF: function (event, obj) {
      var butdata = []
      var target = []
      var usernameData = []
      var companyNameData = []
      var emailData = []
      if (event.target) {
        target = event.target
      } else {
        butdata = event
        usernameData = butdata[0]
        companyNameData = butdata[1]
        emailData = butdata[2]
      }
      if (target.id === 'username' || usernameData.id === 'username') {
        if (target.value === '' || usernameData.value === '') {
          this.usernameError = obj.usernameNull
          this.inputValNullU = obj.errorColor
          this.inputClick = false
        } else if (!(/^[\u4e00-\u9fa5a-zA-Z]([\u4e00-\u9fa5a-zA-Z\d~'!@#￥$%^&*()-+_=:]{7,15})?$/.test(target.value)) || !(/^[\u4e00-\u9fa5a-zA-Z]([\u4e00-\u9fa5a-zA-Z\d~'!@#￥$%^&*()-+_=:]{7,15})?$/.test(usernameData.value))) {
          this.usernameError = obj.usernameError
          this.inputValNullU = obj.errorColor
          this.inputClick = false
        } else {
          this.usernameError = ''
          this.inputClick = true     
        }
      }
      if (target.id === 'email' || emailData.id === 'email') {
        if (target.value === '' || emailData.value === '') {
          this.emailError = obj.emailNull
          this.inputValNullE = obj.errorColor
          this.inputClick = false
        } else if (emailData.value !== undefined) {
          console.log(emailData.value)
          if (!(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(emailData.value))) {
            this.emailError = obj.emailError
            this.inputValNullE = obj.errorColor
            this.inputClick = false
            return false      
          } else {
            this.emailError = ''
            this.inputClick = true
          }
        } else if (target.value !== undefined) {
          console.log(target.value)
          if (!(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(target.value))) {
            console.log(11111)
            this.emailError = obj.emailError
            this.inputValNullE = obj.errorColor
            this.inputClick = false
            return false   
          } else {
            this.emailError = ''
            this.inputClick = true
          }
        }
      }
    },
    // 点击下一步判断是否符合规范
    messageFromBtn: function () {
      var Eobj = [
        {'id': 'username', 'value': this.username},
        {'id': 'companyName', 'value': this.companyName},
        {'id': 'email', 'value': this.emailval}
      ]
      var objError = {
        'usernameNull': '请输入用户名',
        'companyNull': '请输入公司名称',
        'emailNull': '请输入邮箱地址',
        'emailError': '例如：username@email.com',
        'companyError': '支持中文、英文、数字',
        'usernameError': '包括汉字、字母、数字、符号，首个必须是汉字或字母，长度为8~16个字符',
        'errorColor': true
      }
      this.MinputBF(Eobj, objError)
      if (this.themeUldatas[0] === undefined) {
        this.inputClick = false
        this.themeError = '关注主题不能为空'
      }
      if (this.MUldatas[0] === undefined) {
        this.inputClick = false
        this.MmessageError = '关注信息源不能为空'
      }
      if (this.inputClick) {
         var obj = {
            'identityShow': false,
            'messageShow': false,
            'passwordShow': true,
            'completeShow': false,
            'identityShowI': true,
            'messageShowI': true,
            'passwordShowI': true,
            'completeShowI': false,
          }
          this.$emit('flowPClick', obj)
          var data = {
            mmiUsername: this.username,
            mmiCompany: this.companyName,
            mmiMailbox: this.emailval,
            mmtId: this.themeUldatasId.join(','),
            inforsourceids: this.MUldatasId.join(',')
          }
          this.$emit('getData', 'message', data)          
      }
    },
    // 关注主题点击添加
    themeAdd: function () {
      this.addThemeShow = true
      this.themeUlclick = 0
    },
    // 关注信息源点击添加
    messageAdd: function () {
      this.addThemeShow = true
      this.themeUlclick = 1
    },
    // 选择主题下拉框某一项,内容填充在input中
    themeUlList: function (event) {
      // if (event.target.nodeName === 'LI') {
      //   this.themeVal = event.target.innerText
      //   this.themeUlShow = false
      // }
      console.log(event)
    },
    
  },
  components: {
    'theme': theme
  }
}
</script>

<style>
    @import '../../../static/register/message.css'
</style>
